<template>
  <div class="Res-box">
    <div><span class="Res-List"></span> 居民性别统计</div>
    <div class="Res-Date">
      <span>选择签约日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div>
      <!-- 机构 -->
      <ResidentOption @teamId="getTeamId"></ResidentOption>
    </div>
    <!-- 居民性别构成 -->
    <div class="pieChart-Box">
      <div ref="pieChart" :style="{ width: '500px', height: '300px' }"></div>
    </div>

    <div class="Res-btn">
      <el-button @click="ResDerive">导出</el-button>
    </div>
    <!-- 表格 -->

    <div v-if="datagender" class="pie-Tab">
      <el-table :data="datagender" stripe style="width: 100%;font-size: 12px;">
        <el-table-column prop="no" label="序号" align="center" />
        <el-table-column prop="name" label="性别" align="center" />
        <el-table-column prop="value" label="人次" align="center" />
        <el-table-column prop="ratio" label="比例" align="center" />
      </el-table>

    </div>
  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { ref } from 'vue'
import DatePicker from "@/components/mmm/DatePicker.vue"
import ResidentOption from "@/components/mmm/ResidentOption.vue"
import api from '@/api'
import * as XLSX from "xlsx";
import { ElMessage } from 'element-plus'
//居民数据
let genderList = ref()

let nan = ref<number>(0)
let nv = ref<number>(0)
let weizhi = ref<number>(0)
let datagender = ref()
let residentsum = ref<number>(0)
//页面默认信息
const postAllBasicResidentBySearch = async () => {
  const result = await api.Mdatastatistics.postAllBasicResidentBySearchApi()
  console.log("result", result);
  genderList.value = result.data.data
  genderdemo()


}
postAllBasicResidentBySearch()
setTimeout(() => {
  residentsum.value = nan.value + nv.value + weizhi.value;
  datagender.value = [
    { no: 1, value: nan.value, name: `男`, ratio: (nan.value / residentsum.value) * 100 + "%" },
    { no: 2, value: nv.value, name: `女`, ratio: nv.value / residentsum.value * 100 + "%" },
    { no: 3, value: weizhi.value, name: `未知`, ratio: weizhi.value / residentsum.value * 100 + "%" },
    { no: "合计", value: residentsum.value, name: ``, ratio: residentsum.value / residentsum.value }
  ]
  initPieEcharts()
}, 1000)
//表格导出
const ResDerive = () => {
  const data = XLSX.utils.json_to_sheet(datagender.value)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名

  ElMessage({
    message: "导出成功",
    type: 'success'
  })


}



//分页搜索查询居民信息
const postResidentBySOTSLByPage = async (teamId: string) => {
  const result = await api.Mdatastatistics.postResidentBySOTSLByPageApi(teamId)
  genderList.value = result.data.data.result
  genderdemo()
}

const getTeamId = (teamId: string) => {
  console.log('getTeamId', teamId);
  postResidentBySOTSLByPage(teamId)
}


//获取性别数据
function genderdemo() {
  nan.value = 0
  nv.value = 0
  weizhi.value = 0
  genderList.value.forEach((item: any) => {
    console.log('item', item.gender);
    if (item.gender === 0) {
      nan.value++
    } else if (item.gender === 1) {
      nv.value++
    } else {
      weizhi.value++
    }
  });
  aaa()
}

const aaa = () => {
  residentsum.value = nan.value + nv.value + weizhi.value;
  datagender.value = [
    { no: 1, value: nan.value, name: `男`, ratio: (nan.value / residentsum.value) * 100 + "%" },
    { no: 2, value: nv.value, name: `女`, ratio: nv.value / residentsum.value * 100 + "%" },
    { no: 3, value: weizhi.value, name: `未知`, ratio: weizhi.value / residentsum.value * 100 + "%" },
    { no: "合计", value: residentsum.value, name: `-`, ratio: residentsum.value / residentsum.value }
  ]
  initPieEcharts()
}


//绘制饼图
const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();
function initPieEcharts() {
  myChart2.value = echarts.init(pieChart.value!)
  myChart2.value.setOption({
    title: {
      text: '居民性别构成',
      x: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '85%',
      left: 'left'
    },
    series: [
      {
        name: '居民数量',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          normal: {
            show: true,
            position: 'center',
            formatter: `居民总数 ${residentsum.value}`
          },
          emphasis: {
            show: true,
          }

        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: datagender.value.filter((item: any) => item.no !== '合计')
      }
    ]
  })
}



</script>

<style lang='scss' scoped>
.Res-box {
  @include BoxStyle;

  .Res-List {
    @include dataList;
  }

  .Res-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }

  .pieChart-Box {
    border: 1px solid #eee;
    width: 500px;
    padding: 40px;
    border-radius: 8px;
    margin: 0 auto;
  }

  .Res-btn {
    text-align: right;
    margin: 20px;
  }

}
</style>